import React, { memo } from 'react'
import type { ReactNode } from 'react'

interface IProps {
  name: string
  age: number
  height?: number
  // 这里需要手动添加Children属性（有可能为<div>，<span>， 也有可能为单纯的字符串，所以选择ReactNode， 不选择ReactElement，因为纯字符串时会报错）
  children?: ReactNode
}

// 组件约束：2、函数式组件：React.FunctionComponent，简写为：React.FC
// 这里的泛型指定的就是传入组件的props的泛型
const Download: React.FC<IProps> = (props) => {
  return (
    <div>
      <div>name: {props.name}</div>
      <div>age: {props.age}</div>
      <div>height: {props.height}</div>
      <div>children: {props.children}</div>
    </div>
  )
}

// 组件约束：1、直接对传入组件的props进行类型约束
// const Download = (props: IProps) => {
//   return (
//     <div>
//       <div>name: {props.name}</div>
//       <div>age: {props.age}</div>
//       <div>height: {props.height}</div>
//     </div>
//   )
// }

// export default Download
export default memo(Download) // 使用memo包裹组件，只有当组件的props发生变化时，组件才会重新渲染
